iT邦幫忙

2021 iThome 鐵人賽

DAY 27
0
Modern Web

以 React 為主的那些前端事系列 第 27

Day 27 - styled-components 筆記2

  • 分享至 

  • xImage
  •  

Q_Q ..

把 props 傳入 styled-components

import styled from "styled-components";

const Button = styled.button`
  background: ${({ primary }) => (primary ? "palevioletred" : "white")};
  color: ${({ primary }) => (primary ? "white" : "palevioletred")};

  font-size: 1em;
  margin: 1em;
  padding: 0.2em 1em;
  border: 2px solid palevioletred;
  border-radius: 1em;
`;

export default function App() {
  return (
    <section className="App">
        <Button>Normal</Button>
        <Button primary>Primary</Button>
    </section>
  );
}



上一篇
Day 26 - styled-components 筆記1
下一篇
Day 28 - styled-components 筆記3
系列文
以 React 為主的那些前端事30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言